<template>
<view>
<search></search>
<!-- 筛选盒子 -->
<view>
  <view class="filter-box" tt:if="false">
    <view :tt:for="items" class="filter-box-item" @tap="checkFilter" :data-current="index">
      <text class="filter-box-item-text">{{item[0]}}</text>
      <image src="/static/images/icon/down1.svg" mode :class="'filter-box-item-img ' + (item[1] ? 'rotate' : '')"></image>
    </view>
  </view>
  <!-- Filter -->
  <view :tt:if="isShow">
    <view class="area" :if="items[0][1]">
      <view class="area-left">
        <text :tt:for="area" @tap="getChild" :data-index="index" style="border-bottom: 1px #888888 solid; width: 100%;">
          {{item[0]}}
        </text>
      </view>
      <view class="area-right">
        <text :tt:if="areaChild.length > 0" :tt:for="areaChild" class="areaText" @tap="getData" :data-local="item">
          {{item}}
        </text>
      </view>
    </view>
    <!-- Category -->
    <view class="area" :if="items[1][1]">
      <view>
        <text>Category</text>
      </view>
    </view>
    <!-- Time -->
    <view class="area" :tt:if="items[2][1]">
      <view :tt:for="timeList" class="time">
        <text class="areaText" @tap="getData" :data-time="item">{{item}}</text>
      </view>
    </view>
  </view>
  <!-- List -->
  <view :tt:if="contents.length > 0" :tt:for="contents" class="list">
    <view class="list-title">{{item.title}}</view>
    <view class="list-company">公司：{{item.company}}</view>
    <view class="list-date">发布时间：{{item.gmtModified}}</view>
  </view>
  <view>
    <view class="list">
      <view class="list-title">暂时没有数据</view>
      <view class="list-company">公司：None</view>
      <view class="list-date">发布时间：None</view>
    </view>
  </view>
</view>
</view>
</template>

<script>
// pages/card/filter/filter.js
let area = require("../../../utils/area.js");
let app = getApp();
import search from "../../../components/search/index";
import list from "../../../components/list/list";

export default {
  data() {
    return {
      items: [["全部区域", false], ["全部行业", false], ["最新", false]],
      isShow: false,
      area: {},
      areaChild: [],
      timeList: [["最新"], ["热门"], ["最近"]],
      contents: []
    };
  },

  components: {
    search,
    list
  },
  props: {},
  onLoad: function (options) {
    this.getArea();
    const title = options.title;
    const category = options.category;

    if (title != null) {
      uni.setNavigationBarTitle({
        title: title
      });
    }

    let current = 1;

    let _this = this;

    uni.request({
      url: `${app.globalData.baseUrl}/release-work/work/${current}?typeOfWork=${category}`,
      // 目标服务器url
      success: res => {
        let contents = _this.contents;
        contents = res.data.dataMap.data.records;

        _this.setData({
          contents
        });
      }
    });
  },
  methods: {
    getData(e) {
      const local = e.currentTarget.dataset.local;
      const time = e.currentTarget.dataset.time; // 传参数获取数据

      let list = this.items;
      list.forEach((item, index) => {
        if (index === 0 && local != null) item[0] = local;
        if (index === 2 && time != null) item[0] = time;
        item[1] = false;
      });
      this.setData({
        isShow: false,
        items: list
      });
    },

    getChild(e) {
      const index = e.currentTarget.dataset.index;
      let list = this.area[index][1];
      this.setData({
        areaChild: list
      });
    },

    getArea() {
      let areaList = {};
      area.area.forEach((item, index) => {
        let areaListChild = [];
        item.children.forEach((itemChild, index1) => {
          areaListChild.push(itemChild.title);
        });
        areaList[index] = [item.title, areaListChild];
      });
      this.setData({
        area: areaList
      });
    },

    checkFilter(e) {
      let current = e.currentTarget.dataset.current;
      let list = this.items;
      list.forEach((item, index) => {
        if (index === current) {
          item[1] = !item[1];
        } else {
          item[1] = false;
        }
      });
      this.setData({
        items: list,
        isShow: !this.isShow
      });
    }

  }
};
</script>
<style>
.filter-box {
    display: flex;
    flex: content;
    justify-content: center;
    padding: 20rpx 10rpx 20rpx 10rpx;
    height: 100rpx;
    position: sticky;
    position: -webkit-sticky;
    background: #ffffff;
    top: 0;
}
.filter-box-item {
    height: 100%;
    width: 33%;
    text-align: center;
    border: 1px solid rgba(238,238,238,1);
}

.filter-box-item-text {
    line-height: 50rpx;
    margin-left: 25%;
    text-align: center;
    float: left;
}

.filter-box-item-img {
    line-height: 50rpx;
    text-align: center;
    margin-left: 5%;
    float: left;
    width: 30rpx;
}

.rotate {
    transform: rotate(180deg);
    transition: all 300ms;
}

.area {
    width: 100%;
    height: 500rpx;
    border-bottom: 1px #888888 solid;
}

.area-left {
    width: 50%;
    height: 100%;
    line-height: 100%;
    float: left;
    overflow-x: hidden;
	overflow-y: scroll;
    white-space: nowrap;
    border-right: 1px #888888 solid;
}

.area-right {
    width: 40%;
    height: 100%;
    float: left;
    line-height: 100%;
    overflow-x: hidden;
	overflow-y: scroll;
    white-space: nowrap;
}

.time {
    width: 100%;
    height: 100rpx;
}

.areaText {
    width: 100%;
    border-bottom: 1px solid #888888;
}

.list {
    width: 95%;
    height: 200rpx;
    margin: 2.5%;
    border-bottom: solid 1px #e6e6ee;
}

.list-title {
    font-size: 40rpx;
    margin-top: 20rpx;
}

.list-date {
    margin-top: 10rpx;
}
</style>